<template>
  <div>
    <div class="div1" v-if="!flag">
      <el-row class="row1">
        <el-col :span="6">
          <span>账号：</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="input" placeholder="请输入手机号"></el-input>
        </el-col>
      </el-row>
      <el-row class="row1" style="margin-bottom: 10px;">
        <el-col :span="6">
          <span>密码：</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="input" placeholder="请输入密码"></el-input>
        </el-col>
      </el-row>
      <div class="divzc">
        <span @click=" flag =!flag ">马上注册</span>
      </div>
      <div style="margin: 15px 0px;">
        <router-link to="/Home"><el-button type="primary" round style="width: 50%;" >登录</el-button></router-link>
      </div>
    </div>
    
    <div class="div2" v-if="flag" >
       <el-row class="row1">
        
        <el-col :span="16" :offset="4">
          <el-input v-model="input" placeholder="推荐人账号："></el-input>
        </el-col>
      </el-row>
      <el-row class="row1" style="margin-bottom: 10px;">
        
        <el-col :span="16" :offset="4">
          <el-input v-model="input" placeholder="请输入登录账号："></el-input>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="16" :offset="4">
          <el-input v-model="input" placeholder="请输入手机号"></el-input>
        </el-col>
      </el-row>
      <el-row class="row1" style="margin-bottom: 10px;">
       
        <el-col :span="16" :offset="4">
          <el-input v-model="input" placeholder="请输入密码"></el-input>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="16" :offset="4">
          <el-input v-model="input" placeholder="确认密码"></el-input>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="16" :offset="4">
         <template>
            <!-- `checked` 为 true 或 false -->
            <el-checkbox v-model="checked">同意注册协议</el-checkbox>
          </template>
        </el-col>
      </el-row>
       <div style="margin: 15px 0px;text-align: center;">
        <el-button type="primary" round style="width: 60%;" @click=" flag =!flag ">注册</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
   data() {
      return {
        flag:false,
        input:"",
        checked:true,

      }
    },
    created(){

    },
    methods:{

    },
    // components(){

    // },  
}
</script>
<style lang="less" scoped>
  .divzc{
    line-height: 0px;
    text-align: left;
    padding-left: 20px;
    color: #f7ae4e;
  }
.div1{
    width: 90%;
    height: 250px;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 30%;
    left: 5%;
    margin: 0;
    background: white;
    border-radius: 20px;
    box-shadow: 1px 3px 10px #666;
}
  .row1{
    line-height: 55px;
    text-align: center;
    margin: 15px 0px;
  }
</style>
